import styled from 'styled-components'

export const RankingWrapper = styled.div`
  margin-top: 20px;

  .content {
    width: 688px;
    height: 472px;
    margin-top: 20px;
    display: flex;

    background: url(${require('@/assets/img/recommend-top-bg.png')});

    .ranking_item {
      width: 230px;
      /* display: flex; */
      &:last-child {
        width: 228px;
      }

      .ranking_item_top {
        height: 120px;
        display: flex;
        cursor: pointer;
        padding: 20px 0 0 19px;

        .image {
          width: 80px;
          height: 80px;
        }

        .right {
          width: 116px;
          margin: 6px 0 0 10px;

          .title {
            &:hover {
              text-decoration: underline;
            }
          }

          .bottom {
            margin-top: 10px;

            .icon {
              display: block;
              float: left;
              width: 22px;
              height: 22px;
              margin-right: 10px;
              text-indent: -9999px;
            }

            .play {
              background-position: -267px -205px;
              &:hover {
                background-position: -267px -235px;
              }
            }

            .favor {
              background-position: -300px -205px;
              &:hover {
                background-position: -300px -235px;
              }
            }
          }
        }
      }

      .ranking_item_bottom {
        .bottom_ul {
          display: flex;
          flex-direction: column;
          .bottom_li {
            height: 32px;
            display: flex;
            justify-content: flex-start;
            line-height: 32px;
            padding-left: 19px;
            cursor: pointer;
            &:nth-child(-n + 3) .song_rank {
              color: #c20c0c;
            }
            .song_rank {
              margin-right: 20px;
            }
            .song_name {
              display: flex;
              width: 180px;
              white-space: normal;
              overflow: hidden;
              text-overflow: ellipsis;
              &:hover {
                text-decoration: underline;
              }
            }
            .icon {
              width: 0px;
              display: flex;
              align-items: center;
              justify-content: space-around;

              .ib {
                width: 17px;
                height: 17px;
              }
              .play {
                background-position: -267px -268px;
              }
              .add {
                background-position: 0 -700px;
              }
              .favor {
                background-position: -297px -268px;
              }
            }
            &:hover {
              & .song_name {
                width: 96px;
              }
              & .icon {
                width: 84px;
              }
            }

            .more {
              width: auto !important;
              margin-left: auto;
              margin-right: 20px;
            }
          }
        }
      }
    }
  }
`
